<!--
 * @Description: 租户服务记录-服务设置弹出框 
 * @Author: 马山
 * @Date: 2020-03-30 15:36:26
 * @LastEditTime: 2020-03-30 12:43:55
 * @LastEditors: 马山
 -->

<template>
    <el-dialog class="multipleDialog" :close-on-click-modal="false" append-to-body :visible="isShow" title="服务设置" :width="'400px'" @close="closeDialog">
        <div class="multipleContent">
            <el-form label-position="left" label-width="90px" size="mini" status-icon :model="rowData" v-model="rowData" :rules="rules" ref="modifyForm">
                
                <el-form-item label="服务类型：">
                    <el-input size="mini" v-model="rowData.serviceTypeValue" disabled clearable></el-input>
                </el-form-item>
                <el-form-item label="服务名称：">
                    <el-input size="mini" v-model="rowData.serviceName" disabled clearable></el-input>
                </el-form-item>
                <el-form-item label="服务方式：">
                    <el-radio v-model="rowData.serviceMode.type" label="1">数量</el-radio>
                    <el-radio v-model="rowData.serviceMode.type" label="2">时长</el-radio>
                    <el-radio v-model="rowData.serviceMode.type" label="3">数量+时长</el-radio>
                </el-form-item>
                
                <el-form-item label="服务内容：">
                    <div v-if="rowData.serviceMode.type=='1' || rowData.serviceMode.type=='3' " style="margin-bottom:5px;">
                        <span>数量：</span>
                        <el-input size="mini" style="width:150px;" onkeyup="this.value=this.value.replace(/[^\d]/g,'')" maxlength="10"
                        v-model="rowData.serviceMode.count" clearable></el-input><span> 个</span>
                    </div>
                    <div v-if="rowData.serviceMode.type=='2' || rowData.serviceMode.type=='3' " >
                        <span>时长：</span>
                        <el-input size="mini" style="width:150px;" :onkeyup="handleChange()" maxlength="4"
                        v-model="rowData.serviceMode.time" clearable></el-input><span> 月</span>
                    </div>
                </el-form-item>
                <!-- 服务类型等于2时是业务包 业务包类型需要填写商品ID-->
                <el-form-item v-if="rowData.serviceType=='2'" label="商品ID：" prop="mallId">
                    <el-input size="mini" onkeyup="this.value=this.value.replace(/[^\d-]/g,'')" oninput="if(value.length>20)value=value.slice(0,20)" maxlength="20"
                     v-model="rowData.mallId" placeholder="协同云的商品ID" clearable></el-input>
                </el-form-item>

            </el-form>
            
        </div>

        <div slot="footer" class="dialog-footer">
            <button class="el-button el-button--primary" @click="submit">确 定</button>
            <button class="el-button el-button--info" @click="closeDialog">取 消</button>
        </div>
    </el-dialog>
</template>


<script>
export default {
    name:"multiple-dialog",
    components:{},
    data:() =>({
        isShow:false,
        title:"",
        unitProductCode:"",
        serviceId:"",
        // 行数据
        rowData:{
            serviceType:"", //服务类型
            serviceName:"", //服务名称
            serviceMode:{ //服务方式
                type:"",
                count:"",
                time:""
            }, 
            serviceContent:{ //服务内容
                count:"",
                time:""
            },
            mallId:"", //商品ID
        },
        // 一个校验
        rules:{
            mallId:[{ required: true, message: ' ', trigger: 'blur' } ],
        }
    }),
    porps:{},
    mounted(){},
    methods:{

        // 组件入口
        open(data){
            this.isShow = true;
            // let configData = Object.assign({},data);
            let configData = JSON.parse(JSON.stringify(data));
            this.unitProductCode = configData.unitProductCode; //单位产品编号
            let rowConfigData = configData.row;
            this.rowData = rowConfigData;
            this.serviceId = rowConfigData.id; //
            let serviceType = this.rowData.serviceType;
            let value = "";
            if(serviceType){
                switch (serviceType){
                    case "0":
                        value = "标准产品";break;
                    case "1":
                        value = "平台服务";break;
                    case "2":
                        value = "业务包";break;
                    case "3":
                        value = "第三方服务";break;
                    case "4":
                        value = "插件";break;
                }
            }
            this.rowData.serviceTypeValue = value;
            this.rowData.serviceMode={ //服务方式
                type:rowConfigData.serviceMode && rowConfigData.serviceMode.type || "1",
                count:rowConfigData.serviceMode && rowConfigData.serviceMode.count || "",
                time:rowConfigData.serviceMode && rowConfigData.serviceMode.time || "",
            }
        },
        submit(){
            let type = this.rowData.serviceMode.type,
                count = this.rowData.serviceMode.count,
                time = this.rowData.serviceMode.time;

            if(type == "1"){
                if(!count){
                    this.$message("需要设置数量!");
                    return 
                }
            }
            if(type == "2"){
                if(!time){
                    this.$message("需要设置时长!");
                    return 
                }
            }
            if(type == "3"){
                if(!count || !time){
                    this.$message("需要设置数量和时长!");
                    return
                };
            }
            
            this.checkFrom( () =>{
                this.api.updateChildService({
                    unitProductCode:this.unitProductCode, //单位产品编号
                    productInfos:[
                        {
                            id:this.rowData.orderProductId, //this.serviceId 产品id 非服务列表的id
                            serviceMode:{
                                type:type,
                                count:count,
                                time:time
                            },
                            mallId:this.rowData.mallId
                        }
                    ],
                    exits:this.rowData.modify?"1":"0", //原数据为1，新添加的服务为0
                },{loading:true}).then( res =>{
                    console.log(res);
                    console.log("服务设置更新成功");
                    this.$emit("serviceSettingCallback",this.rowData);
                    this.closeDialog();
                }).catch( err => {
                    console.log(err);
                    console.log("服务倍数更新失败");

                });
            });
            
            
        },
        // 表单校验
        checkFrom(call){
            this.$refs.modifyForm.validate((valid) => {
                if (valid) {
                    call && call();
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
           
        },
        handleChange(){
            let timeVal = this.rowData.serviceMode.time;
            timeVal = timeVal.toString().replace(/[^\d]/g,'');
            if(parseInt(timeVal) > 1200 ){
                this.$message("最大只支持1200个月!");
                timeVal = 1200;
            }
            if(parseInt(timeVal) < 1 ){
                this.$message("最小支持1个月!");
                timeVal = 1;
            }
            this.rowData.serviceMode.time = timeVal;
        },

        closeDialog(){
            this.isShow = false;
        }

    }

}
</script>

<style lang="scss" scoped>

</style>

<style lang="scss">

.multipleDialog{
    .el-form-item{
        margin-bottom: 3px;
    }
    .el-form-item__content{
        font-size: 12px;
    }
    .el-input{
        width:210px;
    }
    .el-form--label-left .el-form-item__label{
        font-size: 12px;
    }
    .el-radio{
        margin-right: 10px;
    }
}
</style>


